<template>
    <div
        style="background-color: #f1f5f6; padding-left: 40px"
        v-if="show2 == 1"
    >
        <el-button
            :class="{ a: show == 1 }"
            style="margin: 5px 0 0 10px; border: 0; border-radius: 5px 5px 0 0"
            @click="click(1)"
            >全部</el-button
        >
        <el-button
            :class="{ a: show == 2 }"
            style="margin: 5px 0 0 15px; border: 0; border-radius: 5px 5px 0 0"
            @click="click(2)"
            >未分配</el-button
        >
        <el-button
            :class="{ a: show == 3 }"
            style="margin: 5px 0 0 15px; border: 0; border-radius: 5px 5px 0 0"
            @click="click(3)"
            >已分配</el-button
        >
        <el-button
            :class="{ a: show == 4 }"
            style="margin: 5px 0 0 15px; border: 0; border-radius: 5px 5px 0 0"
            @click="click(4)"
            >查看投诉</el-button
        >
    </div>
    <div class="app-container" v-if="show2 == 1">
        <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="所属分店" prop="shopName" style="width: 200px">
                <el-select
                    v-model="queryParams.shopName"
                    placeholder="请选择所属分店"
                    clearable
                >
                    <el-option
                        v-for="dict in shop"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="客户类型" prop="vipType" style="width: 200px">
                <el-select
                    v-model="queryParams.vipType"
                    placeholder="请选择客户类型"
                    clearable
                >
                    <el-option
                        v-for="dict in vip_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="订单来源"
                prop="ordeSource"
                style="width: 200px"
            >
                <el-select
                    v-model="queryParams.ordeSource"
                    placeholder="请选择订单来源"
                    clearable
                >
                    <el-option
                        v-for="dict in orde_source"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="服务类型"
                prop="staffProperty"
                style="width: 200px"
            >
                <el-select
                    v-model="queryParams.staffProperty"
                    placeholder="请选择服务类型"
                    clearable
                >
                    <el-option
                        v-for="dict in staff_property"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="期望时间" prop="wishTime">
                <el-date-picker
                    clearable
                    v-model="queryParams.wishTime"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择期望时间"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="时间档期" prop="time" style="width: 200px">
                <el-select
                    v-model="queryParams.time"
                    placeholder="请选择时间档期"
                    clearable
                >
                    <el-option
                        v-for="dict in time"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="服务阿姨" prop="staffName">
                <el-input
                    v-model="queryParams.staffName"
                    placeholder="请输入服务阿姨"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery"
                    >搜索</el-button
                >
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                    v-hasPermi="['system:orde:add']"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="Edit"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:orde:edit']"
                    >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="Delete"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:orde:remove']"
                    >删除</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="Download"
                    @click="handleExport"
                    v-hasPermi="['system:orde:export']"
                    >导出</el-button
                >
            </el-col>
            <right-toolbar
                v-model:showSearch="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="ordeList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="订单号" align="center" prop="recordId" />
            <el-table-column label="所属分店" align="center" prop="shopName">
                <template #default="scope">
                    {{ fendian[scope.row.shopName] }}
                </template>
            </el-table-column>
            <el-table-column label="客户姓名" align="center" prop="vipName" />
            <el-table-column label="联系电话" align="center" prop="vipTel" />
            <el-table-column
                label="详细"
                align="center"
                prop="vipXiangxi"
                width="120px"
            >
                <template #default="scope">
                    {{
                        scope.row.vipSheng +
                        scope.row.vipShi +
                        scope.row.vipQu +
                        scope.row.vipXiangxi
                    }}
                </template>
            </el-table-column>
            <el-table-column label="客户类型" align="center" prop="vipType">
                <template #default="scope">
                    <dict-tag :options="vip_type" :value="scope.row.vipType" />
                </template>
            </el-table-column>
            <el-table-column label="客户属性" align="center" prop="vipProperty">
                <template #default="scope">
                    <dict-tag
                        :options="vip_property"
                        :value="scope.row.vipProperty"
                    />
                </template>
            </el-table-column>
            <el-table-column label="订单来源" align="center" prop="ordeSource">
                <template #default="scope">
                    <dict-tag
                        :options="orde_source"
                        :value="scope.row.ordeSource"
                    />
                </template>
            </el-table-column>
            <el-table-column label="价格" align="center" prop="price" />
            <el-table-column
                label="服务类型"
                align="center"
                prop="staffProperty"
            >
                <template #default="scope">
                    <dict-tag
                        :options="staff_property"
                        :value="scope.row.staffProperty"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="期望时间"
                align="center"
                prop="wishTime"
                width="180"
            >
                <template #default="scope">
                    <img
                        style="width: 15px; margin: 0 0 -15px 100px; padding: 0"
                        src="../../../assets/images/bianji.png"
                        @click="xiugai(scope.row)"
                    /><br />
                    <span>{{
                        parseTime(scope.row.wishTime, "{y}-{m}-{d}")
                    }}</span
                    ><br />
                    <span>{{ shuzhu[scope.row.time - 1] }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="上门时间"
                align="center"
                prop="outTime"
                width="180"
            >
                <template #default="scope">
                    <!-- <span>{{ parseTime(scope.row.outTime, '{y}-{m}-{d}') }}</span> -->
                    <span v-if="scope.row.outTime">
                        <span>{{
                            parseTime(scope.row.wishTime, "{y}-{m}-{d}")
                        }}</span
                        ><br />
                        <span>{{ shuzhu[scope.row.outTime - 1] }}</span>
                    </span>
                    <span v-else
                        ><el-button
                            type="primary"
                            @click="selectTime(scope.row)"
                            >分配时间</el-button
                        ></span
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="服务阿姨"
                align="center"
                prop="staffName"
                width="100"
            >
                <template #default="scope">
                    <span v-if="scope.row.staffName">{{
                        scope.row.staffName
                    }}</span>
                    <span v-else
                        ><el-button
                            type="primary"
                            @click="selectPeople(scope.row)"
                            >分配阿姨</el-button
                        ></span
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="是否收款"
                align="center"
                prop="ynMoney"
                width="100"
            >
                <template #default="scope">
                    <!-- <dict-tag :options="yn_money" :value="scope.row.ynMoney" /> -->
                    <span v-if="scope.row.ynMoney == 0">
                        <el-button type="primary" @click="receive(scope.row)"
                            >确认收款</el-button
                        >
                    </span>
                    <span v-else> 已收款{{ scope.row.price }}元 </span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="订单状态" align="center" prop="statusOrde">
                <template #default="scope">
                    {{ orestatus[scope.row.statusOrde] }}
                </template>
            </el-table-column> -->
            <el-table-column label="订单状态" align="center" prop="statusOrde">
                <template #default="scope">
                    <dict-tag
                        :options="status_orde"
                        :value="scope.row.statusOrde"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="投诉"
                align="center"
                prop="tousu"
                width="100px"
            >
                <template #default="scope">
                    <span
                        v-if="
                            scope.row.tousu == null || scope.row.statusOrde != 0
                        "
                        >无</span
                    >
                    <span v-else
                        ><el-button type="primary" @click="tousu(scope.row)"
                            >查看投诉</el-button
                        ></span
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="200px"
            >
                <template #default="scope">
                    <span v-if="num != 4" style="margin-right: 5px">
                        <el-button
                            type="primary"
                            @click="FenPei1(scope.row)"
                            v-if="
                                scope.row.outTime == null ||
                                scope.row.staffName == null ||
                                scope.row.outTime == '' ||
                                scope.row.staffName == ''
                            "
                            >分配</el-button
                        >
                        <el-button
                            type="primary"
                            @click="FenPei1(scope.row)"
                            v-else
                            >详情</el-button
                        >
                    </span>
                    <el-button
                        type="primary"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:orde:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            v-if="num == 1"
            @pagination="getList"
        />
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            v-if="num == 2"
            @pagination="getList3"
        />
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            v-if="num == 3"
            @pagination="getList4"
        />
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            v-if="num == 4"
            @pagination="getList5"
        />
        <!-- 选择上门时间 -->
        <el-dialog
            v-if="title == '选择上门时间'"
            :title="title"
            v-model="open"
            width="500px"
            center
        >
            <el-form
                ref="ordeRef"
                :model="form"
                :rules="rules"
                label-width="100px"
            >
                <el-form-item label="请选择日期" prop="wishTime">
                    <el-date-picker
                        clearable
                        v-model="form.wishTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择期望时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="请选择档期" prop="outTime">
                    <el-radio-group v-model="form.outTime">
                        <el-radio
                            style="width: 140px"
                            value="2"
                            size="large"
                            border
                        >
                            <template #default> 上午8:00-10:00 </template>
                        </el-radio>
                        <el-radio
                            style="width: 145px"
                            value="3"
                            size="large"
                            border
                            >上午10:30-12:30</el-radio
                        >
                        <el-radio
                            style="width: 140px; margin-top: 20px"
                            value="4"
                            size="large"
                            border
                            >下午2:00-4:00</el-radio
                        >
                        <el-radio
                            style="
                                width: 145px;
                                margin-top: 20px;
                                margin-right: 20px;
                            "
                            value="5"
                            size="large"
                            border
                            >下午4:30-6:30</el-radio
                        >
                        <el-radio
                            style="
                                width: 145px;
                                margin-top: 20px;
                                margin-right: 20px;
                            "
                            value="1"
                            size="large"
                            border
                            >全天</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div style="margin-right: 200px">
                    <el-button
                        style="margin-left: 200px"
                        type="primary"
                        @click="submitForm"
                        >确 定</el-button
                    >
                </div>
            </template>
        </el-dialog>
        <!-- 选择阿姨 -->
        <el-dialog
            v-else-if="title == '选择阿姨'"
            :title="title"
            v-model="open"
            width="600px"
            style="padding: 30px 50px"
            center
        >
            <el-table ref="table" :data="staffList" v-loading="loading">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" align="center" prop="staffId" />
                <el-table-column
                    label="阿姨姓名"
                    align="center"
                    prop="staffName"
                />
                <el-table-column
                    label="电话号"
                    align="center"
                    prop="staffTel"
                />
            </el-table>
            <el-button
                style="margin: 30px 0 20px 200px"
                type="primary"
                @click="quedingayi()"
                >确定</el-button
            >
        </el-dialog>
        <!-- 取消订单 -->
        <el-dialog
            v-else-if="title == '取消订单'"
            :title="title"
            width="400px"
            v-model="open"
            center
            style="margin-top: 200px !important"
        >
            <el-form ref="ordeRef" :form="form" :rules="rules">
                <el-row style="margin: 10px 0 10px 90px; font-size: 14px">
                    <el-col>订单号： {{ form.recordId }}</el-col>
                    <el-col style="margin: 10px 0"
                        >客户姓名：{{ form.vipName }}</el-col
                    >
                    <el-col>客户地址： {{ form.vipXiangxi }}</el-col>
                    <el-col style="margin: 10px 0"
                        >服务内容： {{ fuwu[form.staffProperty] }}</el-col
                    >
                    <el-col>价格： {{ form.price }}</el-col>
                </el-row>
                <el-button
                    style="margin: 10px 0 10px 130px"
                    type="primary"
                    @click="quxiao(form)"
                    >确认取消</el-button
                >
            </el-form>
        </el-dialog>
        <!-- 修改期望时间 -->
        <el-dialog
            v-else-if="title == '修改期望时间'"
            :title="title"
            v-model="open"
            width="500px"
            center
        >
            <el-form ref="ordeRef" :model="form" :rules="rules">
                <el-form-item label="请选择日期" prop="wishTime">
                    <el-date-picker
                        clearable
                        v-model="form.wishTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择期望时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="请选择档期" prop="time">
                    <el-radio-group v-model="form.time">
                        <el-radio
                            style="width: 140px"
                            value="2"
                            size="large"
                            border
                        >
                            <template #default> 上午8:00-10:00 </template>
                        </el-radio>
                        <el-radio
                            style="width: 145px"
                            value="3"
                            size="large"
                            border
                            >上午10:30-12:30</el-radio
                        >
                        <el-radio
                            style="width: 140px; margin-top: 20px"
                            value="4"
                            size="large"
                            border
                            >下午2:00-4:00</el-radio
                        >
                        <el-radio
                            style="
                                width: 145px;
                                margin-top: 20px;
                                margin-right: 20px;
                            "
                            value="5"
                            size="large"
                            border
                            >下午4:30-6:30</el-radio
                        >
                        <el-radio
                            style="
                                width: 145px;
                                margin-top: 20px;
                                margin-right: 20px;
                            "
                            value="1"
                            size="large"
                            border
                            >全天</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div style="margin-right: 200px">
                    <el-button
                        style="margin-left: 200px"
                        type="primary"
                        @click="submitForm"
                        >确 定</el-button
                    >
                </div>
            </template>
        </el-dialog>
        <!-- 确认收款 -->
        <el-dialog
            v-else-if="title == '确认收款'"
            :title="title"
            v-model="open"
            width="400px"
            center
        >
            <el-form ref="ordeRef" :model="form" :rules="rules">
                <el-row>
                    <el-col>
                        <el-row>
                            <el-col span="12">
                                <span
                                    style="
                                        margin-right: 10px;
                                        margin-left: 75px;
                                    "
                                    >订单号：{{ form.recordId }},</span
                                >
                                <span>客户：{{ form.vipName }}</span>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col style="margin-top: 20px">
                        <el-row>
                            <el-col>
                                <span style="margin-left: 75px"
                                    >应收款：<span style="color: #ff9821"
                                        >{{ form.price }}.00元</span
                                    ></span
                                >
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-form-item
                        prop="ynMoney"
                        style="margin-left: 80px; margin-top: 30px"
                    >
                        <el-input v-model="form.ynMoney"></el-input>
                    </el-form-item>
                    <el-col style="margin-top: 45px">
                        <el-row>
                            <el-col>
                                <el-button
                                    type="primary"
                                    style="margin-left: 135px"
                                    @click="receiveTime(form)"
                                    >确认收款</el-button
                                >
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 查看投诉 -->
        <el-dialog
            v-else-if="title == '查看投诉'"
            :title="title"
            v-model="open"
            width="400px"
            center
        >
            <el-row
                ref="ordeRef"
                :form="form"
                style="margin: 10px 0 10px 90px; font-size: 14px"
            >
                <el-col>订单号： {{ form.recordId }}</el-col>
                <el-col style="margin: 10px 0"
                    >客户姓名：{{ form.vipName }}</el-col
                >
                <el-col style="margin: 10px 0"
                    >服务内容： {{ fuwu[form.staffProperty] }}</el-col
                >
                <el-col style="margin: 10px 0"
                    >上门时间： {{ form.wishTime
                    }}{{ shuzhu[form.time - 1] }}</el-col
                >
                <el-col style="margin: 10px 0"
                    >投诉时间： {{ form.tousuTime }}</el-col
                >
                <el-col style="margin: 10px 0"
                    >投诉内容： {{ form.tousu }}</el-col
                >
            </el-row>
            <el-button
                style="margin-left: 150px"
                type="primary"
                @click="queding"
                >确定</el-button
            >
        </el-dialog>
        <!-- 添加或修改订单管理对话框 -->
        <el-dialog
            v-else
            :title="title"
            v-model="open"
            width="1000px"
            append-to-body
        >
            <el-form
                ref="ordeRef"
                :model="form"
                :rules="rules"
                label-width="100px"
            >
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vipName"
                    >
                        <el-icon color="#FF6666"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">客户姓名</el-tag>
                        <el-input
                            style="width: 150px"
                            v-model="form.vipName"
                            placeholder="请输入客户姓名"
                        />
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vipTel"
                    >
                        <el-icon color="#FF3333"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">客户电话</el-tag>
                        <el-input
                            style="width: 150px"
                            v-model="form.vipTel"
                            placeholder="请输入客户电话"
                        />
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vip1Name"
                    >
                        <el-tag style="margin-right: 12px">备用联系人</el-tag>
                        <el-input
                            style="width: 150px"
                            v-model="form.vip1Name"
                            placeholder="请输入联系人姓名"
                        />
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vip1Tel"
                    >
                        <el-tag style="margin-right: 10px; margin-left: 14px"
                            >备用电话</el-tag
                        >
                        <el-input
                            style="width: 150px"
                            v-model="form.vip1Tel"
                            placeholder="请输入备用电话"
                        />
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vipType"
                    >
                        <el-icon color="#FF9966"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">客户类型</el-tag>
                        <el-select
                            v-model="form.vipType"
                            placeholder="请选择客户类型"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="dict in vip_type"
                                :key="dict.value"
                                :label="dict.label"
                                :value="parseInt(dict.value)"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vipProperty"
                    >
                        <el-icon color="#FF9933"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">客户属性</el-tag>
                        <el-select
                            v-model="form.vipProperty"
                            placeholder="请选择客户属性"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="dict in vip_property"
                                :key="dict.value"
                                :label="dict.label"
                                :value="parseInt(dict.value)"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="ordeSource"
                    >
                        <el-icon color="#FFCC66"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">订单来源</el-tag>
                        <el-select
                            v-model="form.ordeSource"
                            placeholder="请选择订单来源"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="dict in orde_source"
                                :key="dict.value"
                                :label="dict.label"
                                :value="parseInt(dict.value)"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="profit"
                    >
                        <el-tag style="margin-right: 10px; margin-left: 14px"
                            >平台提点</el-tag
                        >
                        <el-input
                            style="width: 150px"
                            v-model="form.profit"
                            placeholder="请输入平台提点"
                        />
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="price"
                    >
                        <el-icon color="#66FF66"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">服务总价</el-tag>
                        <el-input
                            style="width: 150px"
                            v-model="form.price"
                            placeholder="请输入服务总价"
                        />
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="dangerMoney"
                    >
                        <el-tag style="margin-right: 10px; margin-left: 14px"
                            >风控金</el-tag
                        >
                        <el-input
                            style="width: 150px; margin-left: 12px"
                            v-model="form.dangerMoney"
                            placeholder="请输入风控金"
                        />
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="staffProperty"
                    >
                        <el-icon color="#00CC33"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">是否收款</el-tag>
                        <el-select
                            v-model="form.ynMoney"
                            placeholder="请选择是否收款"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="dict in yn_money"
                                :key="dict.value"
                                :label="dict.label"
                                :value="parseInt(dict.value)"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="ynMoney"
                    >
                        <el-icon color="#66FF99"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">服务类型</el-tag>
                        <el-select
                            v-model="form.staffProperty"
                            placeholder="请选择服务类型"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="dict in staff_property"
                                :key="dict.value"
                                :label="dict.label"
                                :value="parseInt(dict.value)"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="wishTime"
                    >
                        <el-icon color="#33FF33"><StarFilled /></el-icon>
                        <el-tag>期望时间</el-tag>
                        <el-date-picker
                            clearable
                            v-model="form.wishTime"
                            style="width: 150px; margin-left: 10px"
                            type="date"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择期望时间"
                        >
                        </el-date-picker>
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="time"
                    >
                        <el-icon color="#0099CC"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">时间档期</el-tag>
                        <el-select
                            v-model="form.time"
                            placeholder="请选择时间档期"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="dict in time"
                                :key="dict.value"
                                :label="dict.label"
                                :value="parseInt(dict.value)"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="24"
                        style="border-radius: 10px; min-height: 50px"
                        prop="vipAddress"
                    >
                        <el-icon color="#6699FF"><StarFilled /></el-icon>
                        <el-tag style="margin-right: 10px">客户地址</el-tag>
                        <el-select
                            v-model="vipSheng"
                            placeholder="请选择省"
                            style="width: 100px; margin-right: 5px"
                        >
                            <el-option
                                v-for="(item, index) in vipShengArr"
                                :key="index"
                                :label="item"
                                :value="item"
                            ></el-option>
                        </el-select>
                        <el-select
                            v-model="vipShi"
                            placeholder="请选择市"
                            style="width: 100px; margin-right: 5px"
                        >
                            <el-option
                                v-for="(item, index) in vipShiArr"
                                :key="index"
                                :label="item"
                                :value="item"
                            ></el-option>
                        </el-select>
                        <el-select
                            v-model="vipQu"
                            placeholder="请选择区"
                            style="width: 100px; margin-right: 5px"
                        >
                            <el-option
                                v-for="(item, index) in vipQuArr"
                                :key="index"
                                :label="item"
                                :value="item"
                            ></el-option>
                        </el-select>
                        <el-input
                            placeholder="请填写详细地址"
                            style="width: 300px; margin-left: 8px"
                            v-model="form.vipXiangxi"
                        >
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        :span="8"
                        style="
                            border-radius: 10px;
                            min-height: 50px;
                            margin-left: 15px;
                        "
                        prop="buildType"
                    >
                        <el-tag style="margin-right: 10px">房间属性</el-tag>
                        <el-input
                            style="width: 150px"
                            v-model="form.buildType"
                            placeholder="请输入房间属性"
                        />
                    </el-col>
                    <el-col
                        :span="8"
                        style="border-radius: 10px; min-height: 50px"
                        prop="houseType"
                    >
                        <el-tag style="margin-right: 33px">户型</el-tag>
                        <el-input
                            style="width: 150px"
                            v-model="form.houseType"
                            placeholder="请输入户型"
                        />
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 20px">
                    <el-col
                        :span="24"
                        style="
                            border-radius: 10px;
                            min-height: 50px;
                            margin-left: 15px;
                            display: flex;
                            align-items: center;
                        "
                        prop="vipTag"
                    >
                        <el-tag style="margin-right: 10px">客户标签</el-tag>
                        <el-input
                            style="width: 700px"
                            v-model="form.vipTag"
                            placeholder="请输入客户标签"
                        />
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <el-col
                        :span="24"
                        style="
                            border-radius: 10px;
                            min-height: 50px;
                            margin-left: 15px;
                        "
                        prop="vipRemark"
                    >
                        <el-tag style="margin-right: 33px">备注</el-tag>
                        <el-input
                            style="width: 800px"
                            v-model="form.vipRemark"
                            placeholder="请输入备注"
                        />
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm1"
                        >确 定</el-button
                    >
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div v-else>
        <FenPei :order="order" @change="Change"></FenPei>
    </div>
</template>

<script setup name="Orde">
    import {
        listOrde,
        listOrde2,
        listOrde3,
        listOrde4,
        getOrde,
        delOrde,
        addOrde,
        updateOrde
    } from "@/api/system/orde";
    import { listStaff } from "../../../api/system/staff";
    import FenPei from "./components/FenPei.vue";
    import { parseTime } from "../../../utils/ruoyi";
    import { ref, computed, watch } from "vue";
    import areaObj from "../../../area.json";
    const { proxy } = getCurrentInstance();
    const {
        vip_property,
        time,
        yn_money,
        orde_source,
        staff_property,
        vip_type,
        shop,
        status_orde
    } = proxy.useDict(
        "vip_property",
        "time",
        "yn_money",
        "orde_source",
        "staff_property",
        "vip_type",
        "shop",
        "status_orde"
    );
    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            shopName: null,
            vipType: null,
            staffProperty: null,
            wishTime: null,
            time: null,
            staffName: null,
            receiveTime: null,
            ynMoney: null,
            status: null
        },
        rules: {}
    });
    const { queryParams, form, rules } = toRefs(data);
    const vipShengArr = Object.keys(areaObj);
    const vipSheng = ref("");
    // 市
    const vipShiArr = computed(() => {
        if (vipSheng.value != "") {
            return Object.keys(areaObj[vipSheng.value]);
        }
        return "";
    });
    const vipShi = ref("");
    // 监听省份变化
    watch(vipSheng, () => {
        vipShi.value = "";
    });
    // 区
    const vipQuArr = computed(() => {
        if (vipShi.value != "" && vipSheng.value != "") {
            return areaObj[vipSheng.value][vipShi.value];
        }
        return "";
    });
    const vipQu = ref("");
    // 监听市变化
    watch(vipShi, () => {
        vipQu.value = "";
    });
    // 详细地址
    const vipXiangxi = ref("");

    const ordeList = ref([]);
    const staffList = ref([]);
    let list3 = ref([]);
    const table = ref();
    let show = ref(1);
    let show2 = ref(1);
    const order = ref();
    const open = ref(false);
    const loading = ref(true);
    const showSearch = ref(true);
    const ids = ref([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const title = ref("");
    const fendian = ref(["", "分店一", "分店二", "分店三", "分店四"]);
    const fuwu = ref(["", "日常保洁", "家电清洗", "大扫除", "家电维修"]);
    const orestatus = ref(["已完成", "进行中", "未进行"]);
    const shuzhu = ref([
        "全天",
        "上午8:00-10:00",
        "上午10:30-12:30",
        "下午2:00-4:00",
        "下午4:30-6:30"
    ]);
    // const beforetime = ['00:00:00', '08:00:00', '10:30:00', '14:00:00', '16:30:00']
    // const aftertime = ['23:59:59', '10:00:00', '12:30:00', '16:00:00', '18:30:00']

    /** 查询订单管理列表 */
    function getList() {
        loading.value = true;
        listOrde(queryParams.value).then((response) => {
            ordeList.value = response.rows;
            // ordeList.value = response.rows.map((item) => {
            //     let index = item.outTime - 1
            //     let wTime = item.wishTime
            //     let sTime = wTime + ' ' + beforetime[index]
            //     let eTime = wTime + ' ' + aftertime[index]
            //     let date = parseTime(new Date())
            //     if (sTime > date) {
            //         item.statusOrde=2
            //     } else if (eTime < date) {
            //         item.statusOrde=0
            //     } else {
            //         item.statusOrde=1
            //     }

            //     return item
            // })

            list3.value = response.rows;
            total.value = response.total;
            console.log(total.value);
            loading.value = false;
        });
    }

    function getList3() {
        loading.value = true;
        listOrde2(queryParams.value).then((response) => {
            ordeList.value = response.rows;
            total.value = response.total;
            console.log(total.value);
            loading.value = false;
        });
    }

    function getList4() {
        loading.value = true;
        listOrde3(queryParams.value).then((response) => {
            ordeList.value = response.rows;
            total.value = response.total;
            console.log(total.value);
            loading.value = false;
        });
    }

    function getList5() {
        loading.value = true;
        listOrde4(queryParams.value).then((response) => {
            ordeList.value = response.rows;
            total.value = response.total;
            console.log(total.value);
            loading.value = false;
        });
    }
    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }

    // 表单重置
    function reset() {
        form.value = {
            recordId: null,
            shopName: null,
            vipName: null,
            vipTel: null,
            vip1Name: null,
            vip1Tel: null,
            vipSheng: null,
            vipShi: null,
            vipQu: null,
            vipXiangxi: null,
            vipType: null,
            vipProperty: null,
            ordeSource: null,
            profit: null,
            price: null,
            dangerMoney: null,
            staffProperty: null,
            wishTime: null,
            time: null,
            buildType: null,
            houseType: null,
            vipTag: null,
            vipRemark: null,
            outTime: null,
            staffName: null,
            receiveTime: null,
            ynMoney: null,
            status: null
        };
        proxy.resetForm("ordeRef");
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1;
        console.log(num.value);

        if (num.value == 1) {
            getList();
        } else if (num.value == 2) {
            getList3();
        } else if (num.value == 3) {
            getList4();
        } else {
            getList5();
        }
    }

    /** 重置按钮操作 */
    function resetQuery() {
        proxy.resetForm("queryRef");
        // handleQuery()
    }

    // 多选框选中数据
    function handleSelectionChange(selection) {
        ids.value = selection.map((item) => item.recordId);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }
    let num = ref(1);
    // 点击
    function click(row) {
        show.value = row;
        if (row == 1) {
            reset();
            resetQuery();
            num.value = 1;
            getList();
        }
        if (row == 2) {
            reset();
            resetQuery();
            num.value = 2;
            getList3();
        }
        if (row == 3) {
            reset();
            resetQuery();
            num.value = 3;
            getList4();
        }
        if (row == 4) {
            reset();
            resetQuery();
            num.value = 4;
            getList5();
        }
    }
    // 分配
    function FenPei1(value) {
        show2.value = 2;
        order.value = value;
        console.log(order.value);
    }
    const list4 = ref();
    // 页面跳转
    function Change(row) {
        show2.value = 1;
        console.log(row);
        if (row) {
            updateOrde(row).then((response) => {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
            });
        }
    }

    /** 新增按钮操作 */
    function handleAdd() {
        reset();
        open.value = true;
        title.value = "新增订单 带⭐的为必填项";
    }

    /** 修改按钮操作 */
    function handleUpdate(row) {
        reset();
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
            open.value = true;
            title.value = "修改订单管理";
        });
    }

    // 选择上门时间
    function selectTime(row) {
        open.value = true;
        title.value = "选择上门时间";
        reset();
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
    }
    // 查询阿姨列表
    function getList2() {
        loading.value = true;
        listStaff(queryParams.value).then((response) => {
            console.log(response);
            staffList.value = response.rows;
            total.value = response.total;
            loading.value = false;
        });
    }
    // 选择阿姨
    const ayi = ref();
    function selectPeople(row) {
        ayi.value = row;
        open.value = true;
        title.value = "选择阿姨";
        getList2();
        reset();
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
    }
    // 判断派单状态
    function paidan(row) {
        console.log(row);
        if (
            row.staffName != null &&
            row.staffName != "" &&
            row.ynMoney != null &&
            row.ynMoney != ""
        ) {
            row.status = 2;
        }
        if (
            (row.staffName == null || row.staffName == "") &&
            (row.ynMoney != null || row.ynMoney != "")
        ) {
            row.status = 1;
        }
    }
    const aid = ref([]);
    // 确定阿姨
    function quedingayi() {
        aid.value = table.value.getSelectionRows().map((item) => item.staffName);
        if (aid.value.length > 1) {
            proxy.$modal.msgError("只能选一个");
        } else if (aid.value.length == 0) {
            proxy.$modal.msgError("请至少选一个");
        } else {
            ayi.value.staffName = aid.value.join("");
            let date = new Date();
            ayi.value.sendTime = date;
            console.log(ayi.value);
            paidan(ayi.value);
            console.log(ayi.value);
            updateOrde(ayi.value).then((response) => {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
            });
        }
    }

    // 确认收款
    function receive(row) {
        console.log(row);
        open.value = true;
        title.value = "确认收款";
        reset();
        const _recordId = row.recordId || ids.value;

        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
        console.log(form);
    }
    // 收单时间
    function receiveTime(row) {
        if (row.ynMoney == 1) {
            let date = new Date();
            row.receiveTime = date;
        }

        submitForm();
    }
    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["ordeRef"].validate((valid) => {
            if (valid) {
                if (form.value.recordId != null) {
                    console.log(form.value);
                    paidan(form.value);
                    console.log(form.value);
                    updateOrde(form.value).then((response) => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList();
                    });
                } else {
                    paidan(form.value);
                    addOrde(form.value).then((response) => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        getList();
                    });
                }
            }
        });
    }
    function submitForm1() {
        proxy.$refs["ordeRef"].validate((valid) => {
            if (valid) {
                if (form.value.recordId != null) {
                    console.log(form.value);
                    paidan(form.value);
                    console.log(form.value);
                    updateOrde(form.value).then((response) => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList();
                    });
                } else {
                    paidan(form.value);
                    form.value.vipSheng = vipSheng.value;
                    form.value.vipShi = vipShi.value;
                    form.value.vipQu = vipQu.value;
                    addOrde(form.value).then((response) => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        getList();
                    });
                }
            }
        });
    }

    /** 删除按钮操作 */
    function handleDelete(row) {
        open.value = true;
        title.value = "取消订单";
        reset();
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
        if (num.value == 1) {
            getList();
        } else if (num.value == 2) {
            getList3();
        } else if (num.value == 3) {
            getList4();
        } else {
            getList5();
        }
        // const _recordIds = row.recordId || ids.value
        // proxy.$modal
        //     .confirm('是否确认删除订单管理编号为"' + _recordIds + '"的数据项？')
        //     .then(function () {
        //         return delOrde(_recordIds)
        //     })
        //     .then(() => {
        //         getList()
        //         proxy.$modal.msgSuccess('删除成功')
        //     })
        //     .catch(() => {})
    }
    // 取消删除
    function quxiao(row) {
        console.log(row);
        delOrde(row.recordId);
        open.value = false;
        if (num.value == 1) {
            getList();
        } else if (num.value == 2) {
            getList3();
        } else {
            getList4();
        }
    }
    /** 导出按钮操作 */
    function handleExport() {
        proxy.download(
            "system/orde/export",
            {
                ...queryParams.value
            },
            `orde_${new Date().getTime()}.xlsx`
        );
    }
    // 查看投诉
    function tousu(row) {
        console.log(row);
        open.value = true;
        title.value = "查看投诉";
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
    }

    function queding() {
        open.value = false;
    }
    // 修改期望
    function xiugai(row) {
        open.value = true;
        title.value = "修改期望时间";
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
    }
    getList();
</script>
<style scoped>
    .a {
        background-color: #ff9821;
        color: #f1f5f6;
    }
</style>
